<template>
  <a-input-search v-model:value="value" placeholder="input search text" enter-button="Search" size="large"
    @search="onSearch" />
  <a-table :columns="columns" :data-source="data">
    <template #bodyCell="{ column,record }">
      <template v-if="column.key === 'action'">
        <a @click="del(record.id)">Delete</a>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import type { TableProps } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import { getUserList, getOneByid,deleteUser } from '@/apis/users';
const value = ref<string>('');
const data = ref<any>([]);
const del =async (id: number) => {
  console.log(id);
  await deleteUser(id);
  await initData()
}
const onSearch = (searchValue: string) => {
  console.log('use value', searchValue);
  console.log('or use this.value', value.value);
  getOneByid(Number(searchValue)).then(res => {
    data.value = [res.data]
  })
};

const columns: TableProps['columns'] = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: 'username',
    dataIndex: 'username',
  },
  {
    title: 'password',
    dataIndex: 'password',
    width: '30%',
  },
  {
    title: 'Sex',
    dataIndex: 'sex',
  },
  { title: 'Action', key: 'action' },
];

const initData =async () => {
 await getUserList().then((response) => {
    console.log('用户列表：', response.data);
    data.value = response.data
    // response.data.forEach((item: any) => {
    //   data.value.push({
    //     id: item.id,
    //     username: item.username,
    //     password: item.password,
    //     sex: item.sex,
    //   });
    // });
  });
}
onMounted(async() => {
  await initData()
});

</script>